﻿
  <head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="~/lib/axios/dist/axios.js"></script>
</head>
<div id="app">
    <table width="100%">
        <tr>
            <td>
                @*   <font color="black">
                您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--公共属性设置
                </font> *@
            </td>
        </tr>
        <tr>
            <td align="right">
                <el-button v-on:click="tj">添加</el-button>
            </td>
        </tr>
    </table>
    <el-table :data="tableData">
        <el-table-column prop="attribute_kind" label="属性种类"></el-table-column>
        <el-table-column prop="attribute_name" label="属性名称"></el-table-column>
        <el-table-column label="删除">
            <template #default="scope">
                <el-button v-on:click="handleEdit(scope.row.pbc_id)" type="text">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisibleAdd"
               title="添加"
               width="800">
        <span>
            <el-form :rules="rules" :model="from" label-width="auto" style="max-width: 750px">
                <el-form-item label="属性的种类" prop="attribute_kind">
                    <el-input v-model="from.attribute_kind" />
                </el-form-item>
                <el-form-item label="属性的名称" prop="attribute_name">
                    <el-input v-model="from.attribute_name" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="dialogVisibleAdd = false">取消</el-button>
                    <el-button type="primary" v-on:click="AddOk()">
                        变更
                    </el-button>
                </el-form-item>
            </el-form>

        </span>

    </el-dialog>
</div>
<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            let tableData = ref([])

            //查询
            function Fill() {
                axios.post('/CPCS/GetCPCS')
                    .then(res => {
                        tableData.value = res.data;
                    })
            }
            Fill();
            //删除
            function handleEdit(pbc_id) {
                if (confirm("确定要删除吗？")) {
                    axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                    axios.post('/CPCS/DeleteCPCS', { id: pbc_id }).then(res => {
                        if (res.data) {
                            Fill();
                            alert("删除成功")
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
            //添加
            let dialogVisibleAdd = ref(false);
            let from = reactive({
                attribute_kind: "",
                attribute_name: ""
            })
            function tj() {
                dialogVisibleAdd.value = true;
            }
            const rules = {
                attribute_kind: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    // 其他验证规则...
                ],
                attribute_name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    // 其他验证规则...
                ]
                // 其他字段的验证规则...
            };
            function AddOk() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/CPCS/AddCPCS', {
                    attribute_kind: from.attribute_kind,
                    attribute_name: from.attribute_name
                }).then(res => {
                    if (res.data) {
                        Fill();
                        alert("添加成功");
                        from.attribute_kind = "";
                        from.attribute_name = "";
                        dialogVisibleAdd.value = false;
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
            return {
                tableData,
                handleEdit,
                dialogVisibleAdd,
                tj,
                from,
                rules,
                AddOk
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    body {
        background-color: #FFFFBB;
       
    }

    el-table {
        background-color: #FFFFBB;
    }
</style> 